import React from 'react';
import '../css/Todolist.css';
import {TODOKEY,FINISHED,PENDDING,DELETED} from './config';

class Todolist extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            todos:JSON.parse(localStorage.getItem(TODOKEY)) || [],   // 保存源数据
            filterTodos:[],  // 保存筛选出来的数据
            number:1
        }
    }
    // 创建阶段
    // 组件将要挂载
    componentWillMount(){
        // 更新组件本身的初始化状态
        // 组件挂载前，筛选数据
        var tempArray = [];
        this.state.todos.forEach(element => {
            if(element.status !== DELETED){
                tempArray.push(element);
            }
        });
        this.setState({
            filterTodos:tempArray
        });
    }
    render(){
        return(
            <div className="todo">
                <div className="todo-top">{this.state.filterTodos.length}</div>
                <div className="todo-content">
                    {
                        this.state.filterTodos.map((element,index)=>{
                            return <div key={index} className="todo-item-container">
                                <div className="todo-item-checkbox">
                                    <input checked={element.status===FINISHED} 
                                        type="checkbox" onChange={(event)=>{
                                            console.log(event.target.checked);
                                            var checked = event.target.checked;
                                            if(checked){
                                                element.status = FINISHED;
                                            }else{
                                                element.status = PENDDING;
                                            }
                                            // 更新组件的状态
                                            this.setState({
                                                todos:this.state.todos
                                            })
                                            // 保存 
                                            localStorage.setItem(TODOKEY,JSON.stringify(this.state.todos))
                                        }}
                                    />
                                </div>
                                <div className="todo-item-content">{element.content}</div>
                                <div className="todo-item-button">
                                    <button onClick={()=>{
                                        element.status = DELETED;
                                        var index = this.state.filterTodos.findIndex((subElement)=>{
                                            return subElement.content===element.content;
                                        })
                                        // 删除
                                        if(index !== -1){
                                            this.state.filterTodos.splice(index,1);
                                        }
                                        this.setState({
                                            filterTodos:this.state.filterTodos
                                        })
                                        // 保存
                                        localStorage.setItem(TODOKEY,JSON.stringify(this.state.todos))
                                    }}>➖</button>
                                </div>
                            </div>
                        })
                    }
                </div>
                <div className="todo-tool-bar">
                    <div>
                        <button onClick={()=>{
                            var tempArray = [];
                            this.state.todos.forEach(element => {
                                if(element.status !== DELETED){
                                    tempArray.push(element);
                                }
                            });
                            this.setState({
                                filterTodos:tempArray
                            })
                        }}>全部</button>
                    </div>
                    <div>
                        <button onClick={()=>{
                            this.state.filterTodos = [];
                            this.state.todos.forEach(element => {
                                if(element.status === FINISHED){
                                    this.state.filterTodos.push(element);
                                }
                            });
                            this.setState({
                                filterTodos:this.state.filterTodos
                            })
                        }}>已完成</button>
                    </div>
                    <div>
                        <button onClick={()=>{
                            this.state.filterTodos = [];
                            this.state.todos.forEach(element => {
                                if(element.status === PENDDING){
                                    this.state.filterTodos.push(element);
                                }
                            });
                            this.setState({
                                filterTodos:this.state.filterTodos
                            })
                        }}>正在进行</button>
                    </div>
                    {/* <div>
                        <button>已删除</button>
                    </div> */}
                </div>
            </div>
        );
    }
    // 组件完成挂载：vue mounted
    componentDidMount(){
        // 执行异步请求或者耗时操作
    }
    
    // 更新阶段
    componentWillReceiveProps(props){
        console.log(props);
        // 接受新的props,更新组件的状态
        this.props = props;

        // 去重
        var index = this.state.todos.findIndex((element)=>{
            return element.content === this.props.todo.content;
        })

        if(index !== -1){
            alert("不能添加重复的todo");
            return;
        }

        this.state.todos.push(this.props.todo);
        // 保存
        localStorage.setItem(TODOKEY,JSON.stringify(this.state.todos))
        this.setState({
            todos:this.state.todos
        });
    }
    // 是否允许组件更新
    shouldComponentUpdate(){
        return true;
    }

    componentWillUpdate(){

    }

    componentDidUpdate(){
        
    }
}

export default Todolist;